<template>
  <el-card style="margin-bottom: 20px">
    <template #header>
      <wave-flex-box justify-content="start">
        <el-avatar :src="postInfo.authorAvatar"/>
        <el-space direction="vertical" alignment="normal" style="margin-right: 20px">
          <div class="text-container">
            <el-text>{{ postInfo.author }}</el-text>
          </div>
          <div class="text-container">
            <el-text size="small">{{ Func.dateFormat(postInfo.publishTime) }}</el-text>
          </div>
        </el-space>
        <span style="font-size: larger;font-weight: bold;cursor: pointer"
              @click="router.push({ name: 'PostDetail', params: { id: String(postInfo.id) }})"
        > {{ postInfo.title }} </span>
      </wave-flex-box>
    </template>
    <wave-preview :content="postInfo.desc" mode="card"/>
    ...
    <br>
    <wave-preview :post="postInfo" mode="dialog"/>
    <template #footer>
      <el-space> zhan pingl xing</el-space>
    </template>
  </el-card>

</template>
<script setup>
import WaveFlexBox from "@/component/WaveFlexBox.vue";
import WavePreview from "@/component/WavePreview.vue";
import Func from "../../../../utils/Utils.js";
import router from "@/router/index.js";
defineProps({
  postInfo: {
    type: Object,
    required: true
  }
})
</script>
<style scoped>
.text-container {
  width: 110px;
  text-align: left;
}
</style>